<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            深度监视：
                1.vue中的watch默认不监视对象内部值的改变（一层）
                2.给watch配置deep:true可以监视对象内部值的改变（多层）
                3.Vue自身可以监视对象内部值的改变
                4.使用watch时根据数据的具体结构，确定是否使用深度监视
         -->
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather()">切换天气</button><br>
            <h2>a的值是：{{number.a}}</h2>
            <button @click="number.a++">点击使a的值加1</button>
            <h2>b的值是：{{number.b}}</h2>
            <button @click="number.b++">点击使b的值加1</button>
            <br>
            <h2>c1的值是:{{number.c.c1}}</h2>
            <button @click="number.a++;number.b++;number.c.c1++">点击number的值加1</button>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
      const vm =  new Vue({
            el: "#root",
            data: {
                isHot: true,
                number:{
                    a:1,
                    b:1,
                    c:{
                        c1:1
                    }
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot;
                }
            },
            computed: {
                info: {
                    get() {
                        return this.isHot ? "炎热" : "凉爽";
                    }
                }
            },
            watch:{
                isHot:{
                    //immediate:true,
                    handler(newValue,oldValue){
                        console.log("isHot被修改",newValue,oldValue);
                    }
                },
                //监视多级结构中某个属性
                // "number.a":{
                //     handler(){
                //         console.log("a被修改了");
                //     }
                // }
                //监视多级结构中全部的属性
                number:{
                    deep:true,
                    handler(){
                        console.log("number被修改了");
                    }
                }
            }
        })
    
    </script>

</html>